<!--会员中心兑换会员-->
<template>
  <div class="conversion_hy">
      <van-cell class="conversion_p">
        <p>成功兑换后将关联到当前帐号： <span>{{account}}</span></p>
      </van-cell>
    <div class="conversion_inp">
      <input
        v-model="show1"
        class="conversion_inp1"
        type="text"
        placeholder="请输入10位卡号"
        maxlength="10"
      />
      <input
        v-model="show2"
        type="text"
        placeholder="请输入6位卡密"
        maxlength="6"
      />
    </div>
    <div :class="{ btn_h_y: true, asdasd: yt }" type="primary" @click="eqdasxxas">兑换</div>
    <van-popup
      v-model="show"
      :class="{
        msgF1: true,
        animate__animated: dada1,
        animate__bounceIn: dada2,
        animate__slow: dada3,
      }"
    >
      <div class="msg1">
        <div>
          <i class="iconfont icon-alert impdiv1"></i>
        </div>
        <p class="msg_p1">{{ message1 }}</p>
        <button class="button2" @click="dingclick">确定</button>
      </div>
    </van-popup>

    <div class="conversion_h3"><h3>——温馨提示——</h3></div>
    <div class="conversion_div">
      <div>新兑换的会员服务，权益以「会员说明」为准。</div>
      <div>月卡：30次减免配送费。</div>
      <div>季卡：90次减免配送费。</div>
      <div>年卡：360次减免配送费。</div>
      <div>
        ＊仅限蜂鸟专送订单，每日最多减免3单，每单最高减免4元（一个月按31天计算）
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Mineconvehyt",
  data: function () {
    return {
      show1: "",
      show2: "",
      yt: false,
      show: false,
      dada1: false,
      dada2: false,
      dada3: false,
      message1: "无效的兑换码",
      account:"用户名"
    };
  },
  methods: {
    eqdasxxas() {
      this.show = true;
      this.dada1 = true;
      this.dada2 = true;
      this.dada3 = true;
    },
    dingclick() {
      this.show = false;
      this.dada1 = false;
      this.dada2 = false;
      this.dada3 = false;

    },
  },
  watch: {
    show2(newV) {
      // console.log(newV.length);
      if (newV.length >= 6) {
        this.yt = localStorage.getItem("ins");
      }
    },
    show1(newV) {
      // console.log(newV.length);
      if (newV.length >= 10) {
        localStorage.setItem("ins", true);
      }
    },

    deep: true,
  },
  created() {
    this.$axios
      .post("http://localhost:8888/login/select", {
        account: localStorage.getItem("account"),
      })
      .then((res) => {
        this.account = res.data.msg.account;
      })
      .catch((err) => console.log(err));
  },
};
</script>
<style lang="less">
body {
  background-color: #f5f5f5;
}
.conversion_hy {
  .conversion_p {
    background-color: #f5f5f5;
  }
  .conversion_inp {
    input {
      width: 375px;
      border: none;
      background-color: #fff;
      font-size: 14px;
      color: #858585;
      padding: 14px 0 10px 16px;
      box-sizing: border-box;
    }
    .conversion_inp1 {
      border-bottom: 1px solid #f5f5f5;
    }
  }
  .btn_h_y {
    width: 342.52px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    margin-left: 16.5px;
    border-radius: 4px;
    margin-top: 15px;
    color: #ffffff;
    background-color: #cccccc;
    border: none;
  }
  .asdasd {
    background-color: #00dc6e;
  }
  .conversion_h3 {
    text-align: center;
    margin: 20px 0;
    h3 {
      color: #aaaaaa;
      font-size: 15px;
    }
  }
  .conversion_div {
    padding-left: 47px;

    div {
      margin: 2px 0;
      color: #aaaaaa;
      font-size: 12px;
    }
  }
  .dolonghys {
    width: 281px;
    height: 166px;
    text-align: center;
    .dolonghys_ht {
      margin-top: 8px;
      margin-bottom: 8px;
      i {
        font-size: 75px;
        color: #ffc984;
      }
      div {
        font-size: 16px;
        color: #333333;
      }
    }
  }
  .dolonghys_hytS {
    background-color: #00dc6e;
    width: 281px;
    padding: 7px 0;
    border: none;
    margin-top: 11px;
  }

  .msgF1 {
    border-radius: 10px;
    margin: -20% -37%;
    display: none;
    .msg1 {
      width: 281.25px;
      text-align: center;

      .impdiv1 {
        font-size: 80px;
        color: #f8cb86;
        font-weight: 200;
      }
      .msg_p1 {
        color: #333333;
        margin-top: 10px;
      }
      .button2 {
        width: 100%;
        height: 42px;
        margin-top: 20px;
        background-color: #4cd964;
        border: none;
      }
    }
  }
  .animate__animated {
    display: block;
  }
}
</style>
